<template>
  <div class="page-container">
	<!--工具栏-->
	<div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
		<el-form :inline="true" :model="filters" :size="size"> 
			<el-date-picker
				v-model="filters.createdTime"
				type="date"
				@on-change="filters.createdTime=$event"
				value-format="yyyy-MM-dd"
				placeholder="选择日期时间">
			</el-date-picker> 
			<el-form-item>
				<kt-button icon="fa fa-plus" label="获取今日指数板块概况" perms="app:index:grap" type="primary" @click="grapData" />
			</el-form-item>
			<el-form-item>
				<kt-button icon="fa fa-plus" label="导入本地数据库" perms="app:index:import" type="primary" @click="importData(filters.createdTime)" />
			</el-form-item>
			<el-form-item>
				<kt-button icon="fa fa-search" label="查看指数表现" perms="app:index:viewzsbx" type="primary" @click="findPageZsbx(null)"/>
			</el-form-item>
			<el-form-item>
				<kt-button icon="fa fa-search" label="查看指数估值" perms="app:index:viewzsgz" type="primary" @click="findPageZsgz(null)"/>
			</el-form-item>
			<el-form-item>
				<kt-button icon="fa fa-search" label="查看重要贡献点" perms="app:index:viewgxd" type="primary" @click="findPageGxd(null)"/>
			</el-form-item>
		</el-form> 
	</div>
	<div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
		<el-form :inline="true" :size="size">
			<el-form-item>
				<el-button-group>
				<el-tooltip content="刷新" placement="top">
					<el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
				</el-tooltip>
				<el-tooltip content="列显示" placement="top">
					<el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
				</el-tooltip>
				</el-button-group>
			</el-form-item>
		</el-form>
		<!--表格显示列界面-->
		<!-- 指数表现 -->
		<table-column-filter-dialog ref="TableColumnFilterDialogZsbx" :columns="zsbxcolumns"  @handleFilterColumns="handleFilterZsbxColumns"> 
		</table-column-filter-dialog>
 
		<!-- 指数估值 -->      
		<table-column-filter-dialog ref="TableColumnFilterDialogZsgz" :columns="zsgzcolumns"  @handleFilterColumns="handleZsgzFilterColumns"> 
		</table-column-filter-dialog>

		<!-- 指数贡献点 -->      
		<table-column-filter-dialog ref="TableColumnFilterDialogGxd" :columns="gxdcolumns"  @handleFilterColumns="handleGxdFilterColumns"> 
		</table-column-filter-dialog>
 
	</div>

	<!--表格内容栏-->
	<kt-table :height="450" permsEdit="sys:user:edit" permsDelete="app:index:deleteZsbx"
		:data="zsbxPageResult" :columns="zsbxfilterColumns"
		@findPage="findPageZsbx" @handleEdit="handleEdit" @handleDelete="handleDeleteZsbx">
	</kt-table>
	
	<kt-table :height="450" permsEdit="sys:user:edit" permsDelete="app:index:deleteZsgz"
		:data="zsgzPageResult" :columns="zsgzfilterColumns"
		@findPage="findPageZsgz" @handleEdit="handleEdit" @handleDelete="handleDeleteZsgz">
	</kt-table>

	<kt-table :height="450" permsEdit="sys:user:edit" permsDelete="app:index:deleteGxd"
		:data="gxdPageResult" :columns="gxdfilterColumns"
		@findPage="findPageGxd" @handleEdit="handleEdit" @handleDelete="handleDeleteGxd">
	</kt-table>
 

  </div>
  
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput"
import KtTable from "@/views/Core/KtTable"
import KtButton from "@/views/Core/KtButton"
import TableColumnFilterDialogZsbx from "@/views/Core/TableColumnFilterDialog"
import TableColumnFilterDialogZsgz from "@/views/Core/TableColumnFilterDialog"
import TableColumnFilterDialogGxd from "@/views/Core/TableColumnFilterDialog"
import { format } from "@/utils/datetime"
export default {
	components:{
		PopupTreeInput,
		KtTable,
		KtButton,
		TableColumnFilterDialogZsbx,
		TableColumnFilterDialogZsgz,
		TableColumnFilterDialogGxd
	},
	data() {
		return {
			size: 'small',
			filters: {
				createdTime: new Date()
			},
			zsbxcolumns: [],			// 指数表现
			zsbxfilterColumns: [],
			zsgzcolumns: [],			// 指数估值
			zsgzfilterColumns: [],
			gxdcolumns: [],				// 重要指数贡献点
			gxdfilterColumns: [],

			pageRequest: { pageNum: 1, pageSize: 10 },
			pageResult: {},
			zsbxPageResult: {},
			zsgzPageResult: {},
			gxdPageResult: {},

			operation: false, // true:新增, false:编辑
			dialogVisible: false, // 新增编辑界面是否显示
			editLoading: false,
			dataFormRules: {
				// time: [
				// 	{ required: true, message: '请选择时间', trigger: 'blur' }
				// ]
			},
			// 新增编辑界面数据
			dataForm: {
				id: 0,
				zsjc: '',
				sp: '123456',
				rzd: 1,
				jnylzd: '',
				jnylzdf: 'test@qq.com',
				cjejzrzjyy:'',
				cjejzrzjbfb:'',
				createdBy:'',
				createdTime:''
			}
		}
	},
	methods: {
		// 获取分页数据
		findPageZsbx: function (data) {
			if(data !== null) {
				this.pageRequest = data.pageRequest
			}
			this.pageRequest.columnFilters = {date: {name:'createdTime', value:this.filters.createdTime}}
			this.$api.index.findPageZsbx(this.pageRequest).then((res) => {
				this.zsbxPageResult = res.data
			}).then(data!=null?data.callback:'')
		},

		findPageZsgz: function (data) {
			if(data !== null) {
				this.pageRequest = data.pageRequest
			}
			this.pageRequest.columnFilters = {date: {name:'createdTime', value:this.filters.createdTime}}
			this.$api.index.findPageZsgz(this.pageRequest).then((res) => {
				this.zsgzPageResult = res.data
			}).then(data!=null?data.callback:'')
		},

		findPageGxd: function (data) {
			if(data !== null) {
				this.pageRequest = data.pageRequest
			}
			this.pageRequest.columnFilters = {date: {name:'createdTime', value:this.filters.createdTime}}
			this.$api.index.findPageGxd(this.pageRequest).then((res) => {
				this.gxdPageResult = res.data
			}).then(data!=null?data.callback:'')
		},

		// 删除指数表现
		handleDeleteZsbx: function (data) {
			this.$api.index.deleteZsbx(data.params).then(data!=null?data.callback:'')
		},
		// 删除指数估值
		handleDeleteZsgz: function (data) {
			this.$api.index.deleteZsgz(data.params).then(data!=null?data.callback:'')
		},
		// 删除贡献点
		handleDeleteGxd: function (data) {
			this.$api.index.deleteGxd(data.params).then(data!=null?data.callback:'')
		},

		// 抓取今日指数概况数据
		grapData: function () {
			this.$api.index.grapIndexDataToday().then((res)=>{
				this.pageResult = res.data
				if(this.pageRequest) {
					this.$message({ message: '获取数据成功', type: 'success' })
				} else {
					this.$message({ message: '获取数据失败', type: 'warning' })
				}
			}).then(data!=null?data.callback:'')
		},
		// 将抓取到的数据存入本地数据库
		importData: function (selectDate) {
			if (selectDate != null) {
				this.filters.time = selectDate
			}
			this.pageRequest.columnFilters = {time: { name:'time', value:this.filters.time }}
			this.$api.index.importData(this.pageRequest).then((res) =>{
				this.pageResult = res.data
				if(this.pageRequest) {
					this.$message({ message: '导入数据成功', type: 'success' })
				} else {
					this.$message({ message: '导入数据失败', type: 'warning' })
				}
			}).then(selectDate!=null?selectDate.callback:'')
		},
		// 显示编辑界面
		handleEdit: function (params) {
 
		},
		// 编辑
		submitForm: function () {

		},
		// 时间格式化
      	dateFormat: function (row, column, cellValue, index){
          	return format(row[column.property])
      	},
		// 处理表格列过滤显示
      	displayFilterColumnsDialog: function () {
			this.$refs.TableColumnFilterDialogZsbx.setDialogVisible(true)
			this.$refs.TableColumnFilterDialogZsgz.setDialogVisible(true)
			this.$refs.TableColumnFilterDialogGxd.setDialogVisible(true)
      	},
		// 处理表格列过滤显示
      	handleFilterZsbxColumns: function (data) {
			this.zsbxfilterColumns = data.filterColumns
			this.$refs.TableColumnFilterDialogZsbx.setDialogVisible(false)
      	},
      	handleZsgzFilterColumns: function (data) {
			this.zsgzfilterColumns = data.filterColumns
			this.$refs.TableColumnFilterDialogZsgz.setDialogVisible(false)
      	},
      	handleGxdFilterColumns: function (data) {
			this.gxdfilterColumns = data.filterColumns
			this.$refs.TableColumnFilterDialogGxd.setDialogVisible(false)
      	},

		// 处理表格列过滤显示
      	initColumns: function () {
			// 指数表现
			this.zsbxcolumns = [
				{prop:"zsjc", label:"指数简称", minWidth:120},
				{prop:"sp", label:"收盘", minWidth:60},
				{prop:"rzd", label:"日涨跌", minWidth:60},
				{prop:"jnylzd", label:"今年以来涨跌", minWidth:60},
				{prop:"jnylzdf", label:"今年以来涨跌幅 (%)", minWidth:80},
				{prop:"cjejzrzjyy", label:"成交额较昨日增减 (亿元)", minWidth:80},
				{prop:"cjejzrzjbfb", label:"成交额较昨日增减 (%)", minWidth:80},
				{prop:"dataTime", label:"数据更新时间", minWidth:80}
				// {prop:"createdBy", label:"创建人", minWidth:120},
				// {prop:"createdTime", label:"创建时间", minWidth:120, formatter:this.dateFormat}
			]
			this.zsbxfilterColumns = JSON.parse(JSON.stringify(this.zsbxcolumns));

			// 指数估值
			this.zsgzcolumns = [
				{prop:"zsjc", label:"指数简称", minWidth:120},
				{prop:"jtsyl", label:"静态市盈率", minWidth:60},
				{prop:"gdsyl", label:"滚动市盈率", minWidth:60},
				{prop:"sjl", label:"市净率", minWidth:60},
				{prop:"gxl", label:"股息率", minWidth:80},
				{prop:"qndjtsyl", label:"去年底静态市盈率 (%)", minWidth:80},
				{prop:"qndgdsyl", label:"去年底滚动市盈率 (%)", minWidth:80},
				{prop:"qndsjl", label:"去年底市净率 (%)", minWidth:80},
				{prop:"dataTime", label:"数据更新时间", minWidth:80}
				// {prop:"createdBy", label:"创建人", minWidth:120},
				// {prop:"createdTime", label:"创建时间", minWidth:120, formatter:this.dateFormat}
			]
			this.zsgzfilterColumns = JSON.parse(JSON.stringify(this.zsgzcolumns));

			// 贡献点
			this.gxdcolumns = [
				{prop:"gpmc", label:"股票名称", minWidth:120},
				{prop:"sp", label:"收盘", minWidth:60},
				{prop:"rzdf", label:"日涨跌幅 (%)", minWidth:60},
				{prop:"gxds", label:"贡献点数", minWidth:80},
				{prop:"sszs", label:"所属指数", minWidth:80},
				{prop:"dataTime", label:"数据更新时间", minWidth:80}
				// {prop:"createdBy", label:"创建人", minWidth:120},
				// {prop:"createdTime", label:"创建时间", minWidth:120, formatter:this.dateFormat}
			]
			this.gxdfilterColumns = JSON.parse(JSON.stringify(this.gxdcolumns));
      	}
	},
	mounted() {
		this.initColumns()
	}
}
</script>

<style scoped>

</style>